<template>
  <page-template :prop-form="search" :prop-btn="btnPermission" :prop-table="table" :prop-dialog="dialog" :prop-api="apis" />
</template>
<script>
import { getRoleList, addRole, editRole, deleteRoles } from '@/api/authority'
export default {
  name: 'Demo',
  components: {
    PageTemplate: require('@/components/AnjiPlus/PageTemplate').default,
  },
  data() {
    return {
      // 按钮权限值 非必传项（不传代表无按钮权限）
      btnPermission: {
        add: 'gaeaRoleController#insert', // 新增按钮权限值
        edit: 'gaeaRoleController#update', // 编辑按钮权限值
        delete: 'gaeaRoleController#deleteById', // 删除按钮权限值
      },
      apis: {
        query: getRoleList, // 查询接口
        add: addRole, // 新增接口
        edit: editRole, // 编辑接口
        delete: deleteRoles, // 删除接口
      },
      search: {
        list: [
          {
            formType: 'input', //     form表单类型       否            string        select/input        'input'
            label: '角色名称', //   字段名称-支持国际化   是            string             -                 -
            field: 'roleName', //        字段名           是            string             -                 -
          },
          // {
          //   label: '按钮名称', //   字段名称-支持国际化   是            string             -                 -
          //   field: 'remark', //        字段名           是            string             -                 -
          // },
          {
            formType: 'select', //     form表单类型       否            string        select/input        'input'
            label: '启用状态', //   字段名称-支持国际化   是            string             -                 -
            field: 'enabled', //        字段名           是            string             -                 -
            rules: { required: true, message: this.$t('placeholder.input'), trigger: 'change' },
            options: [
              //      下拉框的可选值      否              array            -                 []
              { label: '启用', value: 1 },
              { label: '禁用', value: 0 },
            ],
            optionsconfig: {
              //   下拉框options的配置    否             object            -                 {}
              key: 'value', // 下拉框options的key绑定字段  否             string            -    默认用下边label的值若label未传，则默值为'label'
              label: 'label', //  options的label绑定字段   否             string            -               'label'
              value: 'value', //  options的value绑定字段   否             string            -               'value'
            },
          },
        ],
      },
      table: {
        list: [
          {
            label: '角色名称', //         列名称           是            string             -                 -
            field: 'roleName', //        字段名           是            string             -                 -
          },
          {
            label: '角色描述', //         列名称           是            string             -                 -
            field: 'remark', //        字段名           是            string             -                 -
          },
          {
            label: '启用状态', //         列名称           是            string             -                 -
            field: 'enabled', //        字段名           是            string             -                 -
            custom: true,
            renderer: function(row) {
              return `<span>${row.enabled ? '启用' : '禁用'}</span>`
            },
          },
        ],
        hasSelection: true, //    是否展示复选框         否              boolean            -               true
        hasIndex: true, //    是否展示索引列         否              boolean            -               false
        hasCreateAndupdate: true, // 是否展示创建/更新者和创建时间   否              boolean            -               true
      },
      dialog: {
        list: [
          {
            label: '角色编号', //   字段名称-支持国际化   是            string             -                 -
            rules: { required: true, message: this.$t('placeholder.input'), trigger: 'blur' },
            field: 'roleCode', //        字段名           是            string             -                 -
          },
          {
            label: '角色名称', //   字段名称-支持国际化   是            string             -                 -
            rules: { required: true, message: this.$t('placeholder.input'), trigger: 'blur' },

            field: 'roleName', //        字段名           是            string             -                 -
          },
          {
            label: '角色描述', //   字段名称-支持国际化   是            string             -                 -
            rules: { required: true, message: this.$t('placeholder.input'), trigger: 'blur' },
            field: 'remark', //        字段名           是            string             -                 -
          },
          {
            formType: 'select', //     form表单类型       否            string        select/input        'input'
            label: '启用状态', //   字段名称-支持国际化   是            string             -                 -
            field: 'enabled', //        字段名           是            string             -                 -
            fieldValue: 1, //      字段初始值         否               -               -                 -
            rules: { required: true, message: this.$t('placeholder.input'), trigger: 'change' },
            options: [
              //      下拉框的可选值      否              array            -                 []
              { label: '启用', value: 1 },
              { label: '禁用', value: 0 },
            ],
            optionsconfig: {
              //   下拉框options的配置    否             object            -                 {}
              key: 'value', // 下拉框options的key绑定字段  否             string            -    默认用下边label的值若label未传，则默值为'label'
              label: 'label', //  options的label绑定字段   否             string            -               'label'
              value: 'value', //  options的value绑定字段   否             string            -               'value'
            },
          },
        ],
      },
    }
  },
}
</script>
